<template>
  <div class="allcontent">
    <div class="search">
      <el-form @submit.native.prevent ref="queryRef" :model="searchParam">
        <el-row gutter="10">
          <el-col span="8">
            <el-form-item prop="typeName">
              <el-input  size="small"  @keyup.enter.native="search" placeholder="请输入名称模糊搜索" autofocus v-model="searchParam.typeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col  span="8">
            <el-button  size="small"  plain icon="Search" type="primary" @click="search">搜索</el-button>
          </el-col>
          <el-col  span="8">
            <el-button  size="small" plain icon="Refresh"  type="warning" @click="reset(queryRef)">重置</el-button>
          </el-col>
        </el-row>
        <el-row gutter="10" style="margin-top:10px;margin-bottom: 10px;">
          <el-col span="8">
            <el-button   size="small" plain icon="Edit"   v-if="userStore.hasPermission('system:dicttype:add')" type="success" @click="addData()">新增</el-button>
          </el-col>
          <el-col span="8">
            <el-button   size="small"  plain icon="Edit"  v-if="userStore.hasPermission('system:dicttype:update')" type="primary" @click="editData()"  :disabled="selections.length > 1||  selections.length == 0?true:false">编辑</el-button>
          </el-col>
          <el-col span="8">
            <el-popconfirm
                v-if="userStore.hasPermission('system:dicttype:remove')"
                confirm-button-text="确认"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="是否确认删除这些数据？"
                @confirm="removeRole()"
            >
              <template #reference>
                <el-button  size="small" plain icon="Delete"  :disabled="selections.length == 0?true:false"  type="danger" >删除</el-button>
              </template>
            </el-popconfirm>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="el-table">
      <el-table style="font-size: 13px;" ref="tableRef"  :data="tableData"  v-loading="loading"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"  ></el-table-column>
        <el-table-column prop="typeName" label="字典类型"/>
        <el-table-column prop="typeSign" label="字典类型标识"/>
        <el-table-column prop="sort" label="排序"/>
        <el-table-column  label="操作" width="300">
          <template  #default="scope">
            <el-button  plain icon="Edit"   v-if="userStore.hasPermission('system:dicttype:update')" size="small" type="primary" @click="editData(scope.row.id)">编辑</el-button>
            <el-popconfirm
                v-if="userStore.hasPermission('system:dicttype:remove')"
                confirm-button-text="是"
                cancel-button-text="否"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="是否删除该数据?"
                @confirm="removeRole(scope.row.id)"
            >
              <template #reference>
                <el-button  plain icon="Delete"  size="small" type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
            <el-button plain icon="InfoFilled" size="small" v-if="userStore.hasPermission('system:dictdata:list')" type="info"
                       @click="dictData(scope.row.id)">字典数据</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="el-pager">
      <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="total"
                     :page-sizes="[10,20,30,40,50]" :pager-count="11"
                     size="small"  background  class="mt-4" :current-page="currentPage"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
    <el-dialog v-model="saveDialog" title="新增" width="50%">
      <save :id="id"  @closeAddForm="closeAddForm" @success="success"></save>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import save from './save.vue'
import type {ElTable, FormInstance, FormRules} from 'element-plus'
import {ElMessage} from 'element-plus'
import {useRouteStore} from '@/stores/route.ts'
import {page,remove} from '@/api/dicttype.ts'
import {useUserStore} from '@/stores/user.ts'
import {InfoFilled} from "@element-plus/icons-vue";
const userStore = useUserStore()
const useStore = useRouteStore();
const router= useStore.router;
const dictData=(id)=>{
  router.push("/system/dictdata/"+id)
}

const searchParam =reactive({
  typeName:null,
  page:1,
  limit:10,
})
const search=()=>{
  loadData();
}
const queryRef=ref<FormInstance>();
const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  loadData();
}

const tableData = ref([]);
const total = ref(0);
const loading=ref(false);
const loadData =()=>{
  loading.value=true;
  page(searchParam).then((res)=>{
    if(res.code === 200){
      tableData.value = res.data.list;
      total.value = res.data.total;
    }
    loading.value=false;
  })
}
onMounted(()=>{
  loadData();
})
const currentPage = ref(1)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  searchParam.limit= val;
  loadData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value= val;
  searchParam.page= val;
  loadData();
}

const tableRef=ref<InstanceType<typeof ElTable>>()
const selections = ref([])
const handleSelectionChange=(val)=>{
  selections.value=val;
}

const saveDialog = ref(false);

// 关闭保存用户弹出框
const closeAddForm = ()=> {
  saveDialog.value = false
}

// 提交表单回调函数
const success = ()=> {
  saveDialog.value = false
  loadData();
}
const addData=()=>{
  saveDialog.value = true;
  id.value=null;
}
const id=ref();
const removeRole=async (idvalue:number)=>{
  if(selections.value.length < 0){
    ElMessage({
      type: 'info',
      message: '至少选择一行进行删除',
    })
    return;
  }

  let ids = [];
  if(idvalue != undefined){
    ids.push(idvalue);
  }else{
    selections.value.forEach((item)=>{
      ids.push(item.id)
    })
  }
  await remove(ids)
  loadData();
}

const editData=(idvalue:number)=>{
  if(idvalue != undefined){
    id.value = idvalue;
  }else if(selections.value.length > 0){
    if(selections.value.length > 1){
      ElMessage({
        type: 'warning',
        message: '编辑只能选择一行',
      })
      return;
    }
    id.value = selections.value[0].id
  }else{
    ElMessage({
      type: 'warning',
      message: '选择一行进行编辑',
    })
    return;
  }
  saveDialog.value = true;

}
</script>

<style scoped>
.search{
  margin-bottom: 10px;
}
.el-pager{
  padding: 1%;
  justify-content: right;
  /*		align-items: right;
      position: absolute;
      bottom:0;
      right:0;
      margin-bottom:5px;*/
}
.allcontent{
  height: 65vh;
  position: relative;
}
.el-table{
  max-height:70%;
  overflow: auto;
  display: inline-block;
}
.el-table::-webkit-scrollbar{
  display: none;
}
</style>